<template>
  <el-menu
    :default-active="$route.path"
    class="el-menu-demo"
    mode="horizontal"
    @select="handleMenu"
    router
  >
    <el-menu-item
      v-for="(e, i) in menuList"
      :key="i"
      :index="'/' + e"
    >{{ $t(e) }}</el-menu-item>
    <el-menu-item>
      <el-divider direction="vertical"></el-divider>
    </el-menu-item>
    <el-menu-item>
      <el-dropdown @command="handleLang">
        <span class="el-dropdown-link">
          {{ language }}<i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item
            v-for="lang in languageList"
            :key="lang.locale"
            :command="lang"
          >{{ lang.lang }}</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </el-menu-item>
  </el-menu>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import pages from '@/views/pages'
import { LangItem } from '@/types/language'

@Component
export default class HeaderMenu extends Vue {
  private title: string = '头部菜单'
  private language: string = '中文'
  private activeIndex: string = '0'
  private menuList: string[] = Object.keys(pages)
  private languageList: LangItem[] = [
    { lang: '中文', locale: 'zh' },
    { lang: 'English',  locale: 'en' }
  ]
  private handleMenu(key: any, path: any): void {
    this.$eventBus.$emit('test', 1)
  }
  private handleLang(langItem: LangItem) {
    this.language = langItem.lang
    this.$i18n.locale = langItem.locale
  }
}
</script>

<style>
</style>
